<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>慈善图书列表</title>

  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <link href="../css/all.css" rel="stylesheet"/>
  <link href="../css/index.css" rel="stylesheet"/>
  <link href="../css/swiper-3.4.2.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../css/layui.css" media="all"/>
  <script src="http://at.alicdn.com/t/font_631371_i8gfdrhfd2muc8fr.js"></script>
  <script src="../js/swiper-3.4.2.min.js"></script>
  <script src='../js/jquery-2.0.3.min.js'></script>
   <script type="text/javascript">
   /*<![CDATA[*/
   function collect(bookid){
    	$.ajax({
            url: "/library/collectBook",
            data:{bookid:bookid},
            type: "POST",
            success: function (data) {
            	alert(data);
            }
    	});
   }        
             
   var len = 8;
   var jsonString = "";
   $().ready(function(){
 	  getBookList(1,len,jsonString);
   })
   
   function getFirstPage(){
	   getBookList(1,len,jsonString);
   }
   
 	function getBackPage(){
 		var now = $("#nowPage").val();
 		if(now>1){
 			now--;
 			getBookList(now,len,jsonString);
 		}
 	}
 	
 	function getNextPage(){
 		var now = $("#nowPage").val();
 		var count = $("#countPage").val();
 		if(now<count){
 			now++;
 			getBookList(now,len,jsonString);
 		}
 	}
 	
 	function getLastPage(){
 		var count = $("#countPage").val();
 		getBookList(count,len,jsonString);
 	}
   
 	function getPage(page){
 		var now = $("#nowPage").val();
 		var count = $("#countPage").val();
 		if(now<count){
 			getBookList(now,len,jsonString);
 		}else{
 			getBookList(count,len,jsonString);
 		}
 	}
 	
 	function select(){
 		var bookname = $('#bookname').val().trim();
		var bookauthor = $('#bookauthor').val().trim();
		var bookpress = $('#bookpress').val().trim();
		var booktype = $('#booktype').val().trim();
		var shelveTime = $('#shelveTime').val();
		var borrowAmount = $('#borrowAmount').val();
		var i = 0;
		jsonString = "{";
		if(bookname!=null&&bookname!=""){
			i++;
			jsonString = jsonString + "name:'" + encodeURI(bookname) + "'";
		}
		if(shelveTime!=null&&shelveTime!=""){
			if(i!=0){
				jsonString = jsonString + ","
			}
			i++;
			if(shelveTime=="1"){
				jsonString = jsonString + "shelveTime:'asc'";
			}else if(shelveTime=="2"){
				jsonString = jsonString + "shelveTime:'desc'";
			}
		}
		if(borrowAmount!=null&&borrowAmount!=""){
			if(i!=0){
				jsonString = jsonString + ","
			}
			i++;
			if(borrowAmount=="1"){
				jsonString = jsonString + "borrow:'asc'";
			}else if(borrowAmount=="2"){
				jsonString = jsonString + "borrow:'desc'";
			}
		}
		if(bookauthor!=null&&bookauthor!=""){
			if(i!=0){
				jsonString = jsonString + ","
			}
			i++;
			jsonString = jsonString + "author:'" + encodeURI(bookauthor)  + "'";
		}
		if(bookpress!=null&&bookpress!=""){
			if(i!=0){
				jsonString = jsonString + ","
			}
			i++;
			jsonString = jsonString + "press:'" + encodeURI(bookpress)  + "'";
		}
		if(booktype!=null&&booktype!=""){
			if(i!=0){
				jsonString = jsonString + ","
			}
			i++;
			jsonString = jsonString + "type:" + booktype;
		}
		jsonString = jsonString + "}";
		getBookList(1,len,jsonString);
 	}
   
   function getBookList(begin,length,json){
   	$.ajax({
	   	   url: "/api/book/",
	       type: "GET",
	       beforeSend: function (xhr) { 
	           xhr.setRequestHeader("begin", begin);
	           xhr.setRequestHeader("length", length);
	           xhr.setRequestHeader("jsonString", json);
	       },
           success: function (data) {
           	//获取bookList
           	var list = data.bookList;
           	if(list!=""){
           		var ahtml="";
        		for(var obj in list){
						ahtml+="<li class='list-item'><div class='img-div'>";
						ahtml+="<a  href='/book/"+list[obj].bookid+"'><img class='img' src='"+list[obj].bookpicture+"' alt='图书封面'/></a></div>";
						ahtml+="<div><h4>"+list[obj].bookname+"</h4><p>作者："+list[obj].bookauthor+"</p>";
						ahtml+="<p>分类："+list[obj].type.typename+"</p>";
						ahtml+="<a class='fr' onclick='collect("+list[obj].bookid+")'><svg class='icon' aria-hidden='true'>"; 
						ahtml+="<use xlink:href='#icon-shoucang'></use></svg>";
						ahtml+="收藏</a></div></li>";
        		}
        		$('#bookDiv').html(ahtml);
           	}else{
           		alert("没有该书~");
           		$('#bookDiv').html("");
           	}
           	//获取总记录数
           	var allRecord = data.allRecord;
           	//总页数
           	var countPage = (allRecord%length==0 ? allRecord/length:Math.ceil(allRecord/length));
           	//当前页数
           	var nowPage = (begin);
       		$('#nowPage').val(nowPage);
       		$('#countPage').val(countPage);
     		$('#pageDiv').html("<span>共"+countPage+"页</span>");
           },
           error: function (xhr, textStatus, errorThrow) {
         	  console.log("getBookListList error~");
           }
       });
   }
   /*]]>*/
   </script>
</head>
<body>
  <div th:include="include :: header"></div>
  
  
  <!-- 图书列表 Start -->
  <div class="container clear-f container-top">
    <div class="opration clear-f">
      <li class="">
          <select  id="shelveTime">
            <option value="">-上架时间-</option>
            <option value="1">上架升序</option>
            <option value="2">上架降序</option>
          </select>
      </li>
      <li class="">
          <select  id="borrowAmount">
            <option value="">-借阅数量-</option>
            <option value="1">借阅升序</option>
            <option value="2">借阅降序</option>
          </select>
      </li>
      <div class="fr">
        <li class="">
          <select  id="booktype">
            <option value="">-选择分类-</option>
            <option value="1">文学</option>
            <option value="2">外语</option>
            <option value="3">经济</option>
            <option value="4">管理</option>
            <option value="5">计算机</option>
            <option value="6">科学</option>
          </select>
        </li>
        <li>
            <input type="text" placeholder="图书名称" id="bookname" style="width: 200px;"/>
        </li>
        <li>
            <input type="text" placeholder="作者名称" id="bookauthor" style="width: 200px;"/>
        </li>
        <li>
            <input type="text" placeholder="出版社" id="bookpress" style="width: 200px;"/>
        </li>
        <li>
          <a onclick="select()">搜索</a>
        </li>
      </div>
    </div>
    
    <div class="book-list flex-b-sc fw-wr" id="bookDiv">
      
    </div>
    <div class="pagination flex-b-cc">
      <ul>
        <li>
          <a onclick="getFirstPage()">第一页</a>
        </li>
        <li>
          <a onclick="getBackPage()">上一页</a>
        </li>
       
        <li>
          <a onclick="getNextPage()">下一页</a>
        </li>
        <li>
          <a onclick="getLastPage()">最后一页</a>
        </li>
        <li class="page" id="pageDiv">
          <span>共10页</span>
        </li>
        <li>
          <input type="text" value="1" id="nowPage"/>
          <input type="hidden" id="countPage"/>
        </li>
        <li>
          <a onclick="getPage()">跳转</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 图书列表 End -->

  <!-- footer Start -->
  <div th:include="include :: footer"></div>
  <!-- footer End -->

  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
  <script>

  </script>
</body>
</html>
